<template>
  <div v-if="data" class="json-component">
    <div v-if="!isEmpty(data)">
      <vue-json-pretty
        v-if="isJSON(data)"
        showIcon="true"
        :data="JSON.parse(data)"
      ></vue-json-pretty>
      <div v-else>{{ data }}</div>
      <!-- <VueMarkdown table-class="table" class="answer-md"
                       :style="{ 'max-width': webIMSource === 'client' && isMobile ? '310px' : '680px' }"
                       :source="fixMarkdownOrderedList(replaceLinks(ele.debugging.content))"
                       :anchorAttributes="{ target: '_blank' }" :linkify="false" /> -->
    </div>
    <div v-if="isEmpty(data)">-</div>
  </div>
  <div v-else class="json-component-empty">-</div>
</template>

<script>
import VueMarkdown from "vue-markdown";
// import { TOKENS_STATUS, WORKFLOW_NODE_STATUS } from '@/constants';
// import { replaceLinks } from '@/utils';
import { isJSON, isEmpty } from "@/utils/util";
import VueJsonPretty from "vue-json-pretty";
import "vue-json-pretty/lib/styles.css";
export default {
  components: {
    VueMarkdown,
    VueJsonPretty,
  },
  props: {
    data: {
      type: Object,
      default: null,
    },
  },
  computed: {},
  watch: {},
  mounted() {},
  data() {
    return {};
  },
  methods: {
    // replaceLinks,
    isJSON,
    isEmpty,
  },
};
</script>
<style lang="less" scoped>
div {
  // margin: 0;
  // padding: 0;
  // border: 0;
  box-sizing: border-box;
}

.json-component {
}

.json-component-empty {
  padding: var(--spacing-tight) var(--spacing-none);
}
</style>